<template>
	<view class="SRV-profile" :style="'width: ' + getpx(size) + 'px;height: ' + getpx(size*1.15) + 'px;'">
		<!--<view class="top-icons" ></view>-->
		<!--<view class="full-icons" ></view>-->
		<image :class="getcolor" :src="potos" mode="aspectFill"></image><!-- 头像  --> 
		<image class="full-icons" :src="getfullicon" mode="widthFix" ></image><!-- 星级标  -->
		<image class="top-icons" :src="gettopicon" mode="widthFix" v-if="topicon!='no'"></image><!-- 顶标  -->
		
		
	</view>
</template>
<script>
	/**
	 * 小黄人头像插件 
	 * potos，用户头像图片地址
	 * size,头像大小
	 * topicon，顶标类型 [crown 执勤之星皇冠标识,diamond 钻石]
	 * srvhour，服务小时 [100一星，300二星，600三星，1000四星，1500五星]
	 */
	export default {
		name: "SRVprofile",
		props: {
			potos: {
				// 头像地址
				type: String,
				default: "http://app.chinasrv.com/attachment/xcx/my/default.jpg"
			},
			size: {
					//头像的大小
					type: [Number, String],
					default: 80
				},
			
			topicon:{
					// 顶标 crown皇冠
					type: String,
					default: "no"
				},
			srvhour:{
						// 基础挂件 星际志愿者
					type: [Number, String],
					default: 0
				}
		},	
		
		methods: {
			getpx(x){// 计算 upx to px
				return uni.upx2px(x);
			},
			
			imageLoad(ev) {
				// this.real.width = ;
				//console.log("元素宽度="+ev.detail.width );
				//ev.detail.width=50;
				//this.image.width = 100;
				},
			onLoad() {
				//console.log("元素="+size);
					}
				},
		computed: {
			
			
			
				gettopiconh:{// 计算高度
					get(){
						var s = this.size
						if(this.topicon=='crown'){
							s = this.size * 1.15;
						}
						return s
					}
					},
				getcolor:{// 计算边框颜色
					get(){
						var s = 'userpoto border1';
						var t = this.srvhour;
						var z = this.size;
						var x = '';
						if(z>100)x = 'x';
						if(z>180)x = 'xx';
						if(t>=100){
							s = 'userpoto border2';
						}
						if(t>=2000){
							s = 'userpoto border3';
						}
						//console.log('边框颜色：'+s + x);
						return s + x
						
					}
					},
				gettopicon: {// 转换顶标
					get(){
						
						var s = 'https://app.chinasrv.com/attachment/xcx/202108/'
						if(this.topicon=='crown'){
							if(this.srvhour>=2000){
								s = s + 'profile_2crown.png'
							}else{
								s = s + 'profile_1crown.png'
							}
							
						}else{
							s = s + 'profile_1crown.png'
						}
						//console.log("顶标：" + this.topicon)
						return s
					}
					},
				getfullicon: {// 转换星级标识
					get(){
						
						var s = 'https://app.chinasrv.com/attachment/xcx/202108/'
						if(this.srvhour<100){ //无星义工
							s = s + 'nostar.png';
						}else if(this.srvhour>=100 && this.srvhour<300){ //一星义工
							s = s + 'profile_1star.png'
						}else if(this.srvhour>=300 && this.srvhour<600){ //二星义工
							s = s + 'profile_2star.png'
						}else if(this.srvhour>=600 && this.srvhour<1000){ //三星义工
							s = s + 'profile_3star.png'
						}else if(this.srvhour>=1000 && this.srvhour<1500){ //四星义工
							s = s + 'profile_4star.png'
						}else if(this.srvhour>=1500 && this.srvhour<2000){ //五星义工
							s = s + 'profile_5star.png'
						}else if(this.srvhour>=2000 && this.srvhour<3000){ //1钻义工
							s = s + 'profile_1diamond.png'
						}else if(this.srvhour>=3000 && this.srvhour<4000){ //2钻义工
							s = s + 'profile_2diamond.png'
						}else if(this.srvhour>=4000 && this.srvhour<5000){ //3钻义工
							s = s + 'profile_3diamond.png'
						}else if(this.srvhour>=5000 && this.srvhour<6000){ //4钻义工
							s = s + 'profile_4diamond.png'
						}else if(this.srvhour>=6000){ //5钻义工
							s = s + 'profile_5diamond.png'
						}else{ ////五星以上义工
							s = s + 'profile_5diamond.png'
						}
						//console.log("志愿服务小时：" + this.srvhour)
						
						return s
						
					}
					}
				}
				//
		}
</script>
<style  lang="scss">
	.SRV-profile{
		display: flex;
		position: relative;
		//overflow: hidden;
		//flex-direction: column;
		//align-items: center;
		//justify-content: flex-end;
		//border: 1upx #0055ff solid;
		// transform:scale(0.9);
		// -webkit-transform:scale(0.9);  /*兼容-webkit-引擎浏览器*/
		// -moz-transform:scale(0.9);     /*兼容-moz-引擎浏览器*/
	}
	
	.userpoto{
		
		position: absolute;
		//z-index: 2;
		top:23%;
		//bottom: 8%;
		left:8%;
		width: 84%;
		height: 73%; 
		//margin: 8%;
		border-radius: 50%;
	}
	
	.border1{border:2upx #f0f0f0 solid;}
	.border2{border:2upx #ffcc00 solid;}
	.border3{border:2upx #0c6dff solid;}	
	.border1x{border:4upx #f0f0f0 solid;}
	.border2x{border:4upx #ffcc00 solid;}
	.border3x{border:4upx #0c6dff solid;}	
	.border1xx{border:6upx #f0f0f0 solid; box-shadow: 0px 0px 12px 0px rgba(#333,0.8);}
	.border2xx{border:6upx #ffcc00 solid; box-shadow: 0px 0px 12px 0px rgba(#333,0.8);}
	.border3xx{border:6upx #0c6dff solid; box-shadow: 0px 0px 12px 0px rgba(#333,0.8);}
	
	
	.full-icons{
		position: absolute;
		//z-index: 3;
		top:0;
		left:0;
		width: inherit;
		height: inherit;
		//border: 1upx #00aa00 solid;
		
	}
	
	.top-icons{
		position: absolute;
		//z-index: 4;
		top:0;
		left:0;
		width: inherit;
		height: inherit;
		//border: 1upx #ff0000 solid;
	}
	
</style>
